<template>
  <div id="content">
    <!-- 顶部标签 -->
    <van-nav-bar
      title="钻石详情"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      @click-left="prev"
    >
      <template #right>
        <van-icon name="more-o" size="18" />
      </template>
    </van-nav-bar>
    <!-- 钻石内容简介 -->
    <div class="gem-detail">
      <div class="gem-cover">
        <van-image
          :src="this.gemInfo.cover"
          width="100%"
          height="180"
          radius="10"
        />
      </div>
      <div class="gem-desc">
        <div
          style="
            font-size: 18px;
            font-weight: bold;
            line-height: 30px;
            margin-bottom: 10px;
          "
        >
          {{ this.gemInfo.kj_title }}
        </div>
        <div class="gem-desc-day">
          <div style="width: 90px">销量：2000</div>
          <div class="desc-line">|</div>
          <div style="width: 90px">兑换：{{ this.gemInfo.kj_gme_price }}</div>
          <div class="desc-line">|</div>
          <div style="width: 90px">算力：{{ this.gemInfo.calculation }} T</div>
        </div>
        <div class="gem-desc-day">
          <div style="width: 90px">产量：{{ this.gemInfo.all_produce }}</div>
          <div class="desc-line">|</div>
          <div style="width: 90px">周期：{{ this.gemInfo.cycel }} 天</div>
          <div class="desc-line">|</div>
          <div style="width: 90px"></div>
        </div>
      </div>
    </div>
    <!-- 钻石内容详情 -->
    <div class="gem-content">
      <div class="gem-store-title">—— 商品详情 ——</div>
      <div v-html="gemInfo.content" style="color: #fff"></div>
    </div>
    <!-- 底部菜单 -->
    <div class="bottom">
      <div class="store-nav" @click="prev">
        <div><van-icon name="apps-o" size="20" /></div>
        <div>商城首页</div>
      </div>
      <div class="buy-now" @click="buyNnow">立即购买</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { ImagePreview, Image as VanImage, NavBar, Icon, Dialog } from "vant";
import { getGemDetail } from "../../api/gem";

Vue.use(ImagePreview).use(NavBar).use(Icon).use(VanImage).use(Dialog);

export default {
  data() {
    return {
      id: 0,
      gemInfo: {},
    };
  },
  created() {
    this.id = this.$route.params.id;
    var user_id = localStorage.getItem("user_id");
    var gme_id = localStorage.getItem(user_id + ":gme_id");
    if (this.id == undefined) {
      this.id = gme_id;
    }
    this.fetchDetail(this.id);
  },
  methods: {
    // 获取商品详情
    fetchDetail(id) {
      getGemDetail({ id: id })
        .then((res) => {
          this.gemInfo = res.data;
        })
        .catch();
    },
    // 返回上一页
    prev() {
      this.$router.go(-1);
    },
    buyNnow() {
      this.$router.push({ name: "storeOrder", params: { id: this.id } });
    },
  },
};
</script>

<style scoped>
html {
  background: #1b2b42;
}
#content {
  background: #1b2b42;
}
/* 详情 */
.gem-detail {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  color: #fff;
}
.gem-desc {
  margin: 20px 0;
  text-align: left;
}
/* 基本介绍 */
.gem-desc-day {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  line-height: 30px;
  font-size: 13px;
}
/* .gem-desc-day div{
  margin-right: 20px;
} */
.desc-line {
  color: #778ca9;
}
/* 内容详情 */
.gem-content {
  background: #2b405d;
  border-radius: 10px;
  width: 90%;
  margin-left: 5%;
  margin-bottom: 50px;
  padding-bottom: 20px;
  min-height: 50vh;
}
.gem-store-title {
  color: #778ca9;
  line-height: 50px;
}
.bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  position: fixed;
  bottom: 0;
  height: 50px;
}
.store-nav {
  color: #fff;
  background: #2b405d;
  width: 50%;
  padding: 5px 0;
}
.buy-now {
  background: #31c9a2;
  color: #fff;
  width: 50%;
  line-height: 50px;
}
</style>
